<template>
  <div class="anniversary">
    <div class="bannerWrap" id="tree">
      <div class="backTop">
        <img src="@/assets/img/activity/christmas/dmTitle.png" alt=""
        v-if="$store.state.app.language === 'zh-CN'
        || $store.state.app.language === 'zh-TW'">
        <img src="@/assets/img/activity/christmas/dmTitleen.png" alt="" v-else style="width: 600px;">
      </div>
      <div class="backBottom">
        <div class="prizeList"
          v-if="grandPrizeList.length > 0"
          ref="noticeHover"
          style="position: relative; height: 35px; overflow: hidden; width: 600px;"
          :style="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW' ? 'padding: 0 0 0 120px': ''">
          <div class="noticeScroll" ref="noticeScroll">
            <div :key="index" v-for="(item, index) in grandPrizeList" class="noticeItem flex" @click="handleToJump(item.trxId)">
              <i class="iconfont icon-xiaoxitishi"></i>
              <!-- 恭喜{{item.account }}抽得{{ item.reward }}的奖励！！！  -->
              {{ $t('christmas2019.chris69', {account: item.account}) }} >
            </div>
          </div>
        </div>
        <!-- 弹幕 -->
        <barrage/>
      </div>
    </div>
    <!-- 视频 -->
    <div class="video" id="video">
      <!-- <img src="@/assets/img/activity/christmas/videoLeft.png" alt="" class="videoLeft">
      <img src="@/assets/img/activity/christmas/videoRight.png" alt="" class="videoRight"> -->
      <span class="video-btn" @click="handlePlayVideo"></span>
      <a :href="videoUrl" class="hidden" target="_blank" ref="videoHref"></a>
    </div>
    <div class="btnJump flexc">
      <span @click="handleToOtc">{{ $t('christmas2019.chris54') }}</span>
    </div>
    <!-- 周年趴 -->
    <div class="carnival" id="img">
      <!-- <h3 class="title strength">{{ $t('anniversary.annualCarnival') }}</h3> -->
      <div class="title1">
        <img src="@/assets/img/activity/christmas/cardTitle.jpg" alt=""
        v-if="$store.state.app.language === 'zh-CN'
        || $store.state.app.language === 'zh-TW'">
        <img src="@/assets/img/activity/christmas/cardTitleen.png" alt="" v-else style="width: 400px;">
      </div>
      <div class="carnival-cont">
        <div class="active-change flexc" >
          <span v-for="(item, index) in activeList" :key="index" @click="active = index;" :class="{'active': active === index}">
            {{ $t(`christmas2019.${item.label}`) }}
          </span>
        </div>
        <div class="wallet" v-if="!active">
          <div class="carnival-list clearfix">
            <div class="carnival-item flexb fl" v-for="(item, index) in walletList" :key="index">
              <div class="carnival-item-cont">
                <img :src="item.logoImg" alt="">
                <p class="word1">{{ $t(`christmas2019.${item.title}`) }}</p>
                <p class="word2">{{ $t(`christmas2019.${item.word}`) }}</p>
              </div>
              <div class="carnival-item-ewm">
                <img :src="item.ewmImg" alt="" class="ewm ewmImg">
              </div>
              <span class="date">{{ $t(`christmas2019.${item.time}`) }}</span>
            </div>
          </div>
        </div>
        <div class="ambassador" v-if="active">
          <div class="carnival-list clearfix">
            <div class="carnival-item flexb fl" v-for="(item, index) in ambassadorList" :key="index">
              <div class="carnival-item-cont">
                <p class="word2">{{ $t(`christmas2019.${item.word1}`) }}</p>
                <p class="word1">{{ $t(`christmas2019.${item.word2}`) }}</p>
                <p class="word2">{{ $t(`christmas2019.${item.word3}`) }}</p>
              </div>
              <span class="date">{{ $t(`christmas2019.${item.time}`) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a href="https://www.chainnode.com/post/364022" target="_blank" class="hidden" ref="chainNode"></a>
    <!-- 周年庆惊喜转不停-->
    <draw @listenWalletPermission="handleWalletPermission" id="draw"/>
    <div class="symbleTitle">
      <i class="line"></i>
      <span>{{ $t('christmas2019.chris49') }}</span>
      <i class="line"></i>
    </div>
    <!-- 交易对 -->
    <symble-list />
    <p class="center" style="margin-top: 50px; color: rgba(241, 200, 157, .8);">
      * {{ $t('activity.toNewdex') }}
    </p>
    <!-- 视频播放组件 -->
    <my-video
      :video-config="videoConfig"
      @listenVideoLevel="handleVideoLevel"/>
    <!-- 锚点 -->
    <transition name="el-fade-in-linear">
      <div class="anchorPoint" v-show="btnFlag">
        <div>
          <a href="#tree">{{ $t('christmas2019.chris50') }}</a>
        </div>
        <div>
          <a href="#video">{{ $t('christmas2019.chris51') }}</a>
        </div>
        <div>
          <a href="#img">{{ $t('christmas2019.chris52') }}</a>
        </div>
        <div>
          <a href="#draw">
            {{ $t('christmas2019.chris53') }}
          </a>
        </div>
        <div class="flexc" @click="handleBackTop">
          <i class="iconfont el-icon-arrow-up"></i>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import MyVideo from '@/components/Video';
import Barrage from './Baberrage';
import Draw from './Draw';
import SymbleList from './SymbleList';
// https://youtu.be/BmIHUh0PVa0
// https://www.youtube.com/embed/BmIHUh0PVa0
export default {
  name: 'anniversary', // 周年活动
  data() {
    return {
      videoUrl: '',
      videoConfig: {
        open: false,
        en: 'https://www.youtube.com/embed/BmIHUh0PVa0', // 国外访问视频地址
        zh: 'https://cdn.340wan.com/newdex-otc2.mp4' // 国内
      },
      active: 0,
      btnFlag: false, // 锚点
      scrollTop: 0, // 滚动距离
      activeList: [
        {
          id: 1,
          label: 'chris55'
        },
        {
          id: 2,
          label: 'chris56'
        }
      ],
      walletList: [
        {
          id: 1,
          logoImg: '/static/activity/christmas/et1.png',
          ewmImg: '/static/activity/christmas/et.png',
          title: 'name1',
          word: 'desc1',
          time: 'time1',
        },
        {
          id: 2,
          logoImg: '/static/activity/christmas/tp1.png',
          ewmImg: '/static/activity/christmas/tp.png',
          title: 'name2',
          word: 'desc2',
          time: 'time2',
        },
        {
          id: 3,
          logoImg: '/static/activity/christmas/meetone1.png',
          ewmImg: '/static/activity/christmas/meetone.png',
          title: 'name3',
          word: 'desc3',
          time: 'time3',
        },
        {
          id: 4,
          logoImg: '/static/activity/christmas/starteos1.png',
          ewmImg: '/static/activity/christmas/starteos.png',
          title: 'name4',
          word: 'desc4',
          time: 'time4',
        },
        {
          id: 5,
          logoImg: '/static/activity/christmas/paytomat1.png',
          ewmImg: '/static/activity/christmas/paytomat.png',
          title: 'name5',
          word: 'desc5',
          time: 'time5',
        },
        {
          id: 6,
          logoImg: '/static/activity/christmas/gl1.png',
          ewmImg: '/static/activity/christmas/gl.png',
          title: 'name6',
          word: 'desc6',
          time: 'time6',
        },
        {
          id: 7,
          logoImg: '/static/activity/christmas/bitkeep1.png',
          ewmImg: '/static/activity/christmas/bitkeep.png',
          title: 'name7',
          word: 'desc7',
          time: 'time7',
        },
        {
          id: 8,
          logoImg: '/static/activity/christmas/mz1.png',
          ewmImg: '/static/activity/christmas/mz.png',
          title: 'name8',
          word: 'desc8',
          time: 'time8',
        },
        {
          id: 9,
          logoImg: '/static/activity/christmas/kx1.png',
          ewmImg: '/static/activity/christmas/kx.png',
          title: 'name9',
          word: 'desc9',
          time: 'time9',
        },
        {
          id: 10,
          logoImg: '/static/activity/christmas/bepal1.png',
          ewmImg: '/static/activity/christmas/bepal.png',
          title: 'name10',
          word: 'desc10',
          time: 'time10',
        }
      ],
      ambassadorList: [
        {
          id: 1,
          word1: 'title11',
          word2: 'name11',
          word3: 'desc11',
          time: 'time11',
        },
        {
          id: 2,
          word1: 'title12',
          word2: 'name12',
          word3: 'desc12',
          time: 'time12',
        },
        {
          id: 3,
          word1: 'title13',
          word2: 'name13',
          word3: 'desc13',
          time: 'time13',
        },
        {
          id: 4,
          word1: 'title14',
          word2: 'name14',
          word3: 'desc14',
          time: 'time14',
        },
        {
          id: 5,
          word1: 'title15',
          word2: 'name15',
          word3: 'desc15',
          time: 'time15',
        },
        {
          id: 6,
          word1: 'title16',
          word2: 'name16',
          word3: 'desc16',
          time: 'time16',
        },
        {
          id: 7,
          word1: 'title17',
          word2: 'name17',
          word3: 'desc17',
          time: 'time17',
        },
        {
          id: 8,
          word1: 'title18',
          word2: 'name18',
          word3: 'desc18',
          time: 'time18',
        },
        {
          id: 9,
          word1: 'title19',
          word2: 'name19',
          word3: 'desc19',
          time: 'time19',
        },
      ],
      grandPrizeList: []
    }
  },
  components: {
    MyVideo,
    Barrage,
    Draw,
    SymbleList
  },
  props: {},
  watch: {
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.handleGetNoticeData();
    this.handleNoticeScroll();
    window.addEventListener('scroll', this.scrollToTop);
  },
  beforeDestroy() {
    if (this.noticeScrollTimer) {
      clearInterval(this.noticeScrollTimer)
    }
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    handleGetNoticeData() {
      // 获取获奖列表
      this.$http.post('/christmas/getGrandPrizeList').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.grandPrizeList = res.grandPrizeList;
      });
    },
    // notice 滚动
    handleNoticeScroll() {
      let noticeScrollWay = 0;
      this.noticeScrollTimer = setInterval(() => {
        const num = this.grandPrizeList.length;
        if (num === 1) return;
        noticeScrollWay -= 35;
        if (noticeScrollWay < -35 * (num - 1)) {
          noticeScrollWay = 0;
        }
        if (this.$refs.noticeScroll) {
          this.$refs.noticeScroll.style = `transform: translateY(${noticeScrollWay}px) scale(1);`;
        }
      }, 4000)
    },
    // 跳转到寻宝页面
    handleToHunt() {
      this.$router.push({
        name: 'treasure'
      })
    },
    // 视频播放
    handlePlayVideo() {
      const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
      this.videoUrl = this.videoConfig.en;
      const lang = this.$store.state.app.language;
      if (lang === 'zh-CN' || lang === 'zh-TW') {
        this.videoUrl = this.videoConfig.zh;
      }
      if (userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1) {
        setTimeout(() => {
          this.$refs.videoHref.click();
        }, 500)
        return;
      }
      this.videoConfig.open = true;
    },
    // 关闭视频通知
    handleVideoLevel(val) {
      if (val === 'close') {
        this.videoConfig.open = false;
      }
    },
    // 链节点
    handleChainNode() {
      this.$refs.chainNode.click();
    },
    /**
     * 钱包授权
     */
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      sessionStorage.setItem('checkWalletByChain', 'EOS');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 监听滚动事件
    scrollToTop() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrollTop = scrollTop
      if (this.scrollTop > 540) {
        this.btnFlag = true
      } else {
        this.btnFlag = false
      }
    },
    // 回到顶部
    handleBackTop() {
      const timer = setInterval(() => {
        const ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = this.scrollTop + ispeed; // eslint-disable-line
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 10)
    },
    // 跳转OTC
    handleToOtc() {
      this.$router.push({
        name: 'otc'
      })
    },
    // 跳转账号
    handleToJump(trxId) {
      window.open(`https://bloks.io/tx/${trxId}`);
    }
  },
}
</script>
<style lang="scss" scoped>
$-btn-color: #663C04;
$-btn-back: #F1C89D;
.anniversary {
  background: #212227;
  color: #fff;
  padding-bottom: 40px;

  .anchorPoint {
    transition: all 1s;
    position: fixed;
    top: 300px;
    left: 50%;
    margin-left: 640px;
    background: $-btn-back;
    color: $-btn-color;
    padding: 10px 20px;
    z-index: 19;
    & > div {
      padding: 10px 0;
      border-bottom: 1px solid $-btn-color;
      line-height: 30px;
      cursor: pointer;
      text-align: center;

      &:last-child {
        border: 0;
      }

      i {
        font-size: 28px;
      }

      a:hover {
        color: $-btn-color;
      }
    }
  }

  .cursorPointer {
    cursor: pointer;
  }

  .bannerWrap {
    // height: 1100px;

    .backTop {
      padding-top: 100px;
      height: 280px;
      background: url('../../../assets/img/activity/christmas/backTop.png');
      background-size: cover;

      img {
        display: block;
        width: 475px;
        margin: 0 auto;
      }
    }

    .backBottom {
      position: relative;
      // height: 700px;
      // background: url('../../../assets/img/activity/christmas/backBottom.png');
      // background-size: cover;

      .prizeList {
        margin: 20px auto 40px;
        line-height: 35px;
        color: $-btn-back;
        // border: 1px solid #fff;
        border-radius: 20px;
        padding: 0 40px;
        // background-image: linear-gradient(to right, #5B86F2 0%, #9A94D9 100%);
        .noticeScroll {
          transition: transform .4s ease-in-out;
          position: absolute;
          width: 550px;
          padding-left: 30px;

          .noticeItem {
            line-height: 35px;
            font-size: 16px;
            cursor: pointer;
          }

          i {
            margin: 0 10px 0 0;
            font-size: 24px;
          }
        }
      }
    }
  }


  .video {
    width: 913px;
    height: 500px;
    background: url('../../../assets/img/activity/christmas/video.png');
    position: relative;
    margin: 0px auto 30px;
    background-size: 100% 100%;

    .video-btn {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      background: url('../../../assets/img/videoplay.png');
      background-size: cover;
      cursor: pointer;
    }

    .videoLeft, .videoRight {
      position: absolute;
      bottom: -20px;
      width: 150px;
    }

    .videoLeft {
      left: -30px;
    }

    .videoRight {
      right: -30px;
      bottom: -10px;
    }
  }

  .title {
    text-align: center;
    font-size: 40px;
    margin: 120px 0 60px 0;
    color: #FFC78A;
  }

  .title1 {
    img {
      display: block;
      width: 234px;
      margin: 50px auto 30px;
    }
  }

  .carnival {
    .carnival-cont {
      position: relative;
      width: 1260px;
      margin: 0 auto 60px;
      color: $-btn-back;

      .active-change {
        margin-bottom: 30px;

        span {
          display: inline-block;
          width: 180px;
          text-align: center;
          line-height: 34px;
          border: 1px solid #fff;
          cursor: pointer;
          color: #fff;

          &:first-child {
            margin-right: 30px;
          }
        }

        .active {
          background: $-btn-back !important;
          color: $-btn-color;
          border-color: $-btn-back;
        }
      }

      .carnival-list {
        position: relative;
        // height: 238px;
        margin-bottom: 40px;

        .carnival-item {
          position: relative;
          width: 48.5%;
          height: 250px;
          border-radius: 15px;
          padding: 10px 10px 25px 45px;
          background: rgba(255, 255, 255, 0.2);
          margin-bottom: 30px;

          &:nth-child(2n-1) {
            margin-right: 3%;
          }

          .date {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 140px;
            height: 37px;
            background: url('../../../assets/img/activity/ambassador/jiaobiao.png') center center no-repeat;
            background-size: 100% 100%;
            line-height: 37px;
            text-align: center;
            color: #fff;
          }

          .carnival-item-cont {
            flex: 6;

            img {
              display: block;
              width: 130px;
              vertical-align: middle;
              // margin-left: -13px;
              margin-bottom: 20px;
            }

            .word1 {
              font-size: 28px;
              margin: 10px 0 30px;
            }

            .word2 {
              font-size: 14px;
            }

            .part {
              margin-top: 15px;
              width: 100px;
              line-height: 34px;
              border: 1px solid #fff;
              border-radius: 5px;
              text-align: center;
              cursor: pointer;
            }
          }

          .carnival-item-ewm {
            flex: 3;
            // width: 180px;

            img {
              display: inline-block;
              width: 100%;
              margin-bottom: -30px;
            }

            .ewmImg {
              width: 60%;
              margin-left: 40px;
            }
          }
        }
      }

      .ambassador {
        .word1 {
          margin-bottom: 10px!important;
        }
      }
    }
  }

  .symbleTitle {
    margin: 50px auto 0;
    width: 1000px;
    display: flex;
    align-items: center;
    color: #F1C89D;

    span {
      padding: 0 10px;
    }

    .line {
      flex: 1;
      height: 2px;
      display: block;
      background-color: #F1C89D;
    }
  }

  .btnJump {
    span {
      color: $-btn-color;
      background: $-btn-back;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 5px;
    }
  }
}
</style>

